<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>北城韩雨 - 一个前端界的小学生</title><meta name="author" content="北城韩雨"><meta name="copyright" content="北城韩雨"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#0d0d0d"><meta name="description" content="一个前端界的小学生">
<meta property="og:type" content="website">
<meta property="og:title" content="北城韩雨">
<meta property="og:url" content="http://example.com/page/2/index.html">
<meta property="og:site_name" content="北城韩雨">
<meta property="og:description" content="一个前端界的小学生">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/img/my.jpg">
<meta property="article:author" content="北城韩雨">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/img/my.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/page/2/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'mediumZoom',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '北城韩雨',
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2021-08-02 17:15:24'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/coin.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/liuxing.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/showbb_in_index.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus/lib/tag_plugins.min.css" media="defer" onload="this.media='all'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/my.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('/img/bg2.jpeg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">北城韩雨</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">北城韩雨</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="/wangzhengvslike@163.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-bell scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="bbTimeList container" id="bbTimeList" onclick="window.open('/shuoshuo/','_self')"><bblogo onclick="location='/shuoshuo/'" title="即刻短文" style="font-size: 2rem;"></bblogo><div class="swiper-container" id="bbtalk"><div class="swiper-wrapper" id="bber-talk"></div></div><i class="bber-gotobb fas fa-arrow-circle-right" onclick="location='/shuoshuo/'" title="查看全文"></i></div><div class="js-pjax"><script>var bbShortApiUrl = "https://7477-twikoo-4gkyxol6e825079a-1306570258.tcb.qcloud.la/json/bber.json?sign=cfe19172dcf9e18f67123e3da26cb579&t=1627461876"</script><script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js" data-pjax=""></script><script src="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/showbb_in_index.js" data-pjax="" defer=""></script></div><div class="recent-post-item" style="height:auto;width:100%;padding:0px;"><div id="categoryBar"><ul class="categoryBar-list"><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/Gin-Vue-Admin/">Gin-Vue-Admin</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/JS%E9%AB%98%E7%BA%A7/">JS高级</a><span class="categoryBar-list-count">4</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/JavaScript/">JavaScript</a><span class="categoryBar-list-count">2</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/Node/">Node</a><span class="categoryBar-list-count">4</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/React/">React</a><span class="categoryBar-list-count">3</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/TS/">TS</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/Vue/">Vue</a><span class="categoryBar-list-count">4</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/webpack/">webpack</a><span class="categoryBar-list-count">3</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">前端性能优化</a><span class="categoryBar-list-count">2</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E5%8E%9F%E7%94%9FJs/">原生Js</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E5%8E%9F%E7%94%9Fjs/">原生js</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E5%BE%AE%E4%BF%A1/">微信</a><span class="categoryBar-list-count">2</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">性能优化</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E6%95%B0%E6%8D%AE%E5%BA%93/">数据库</a><span class="categoryBar-list-count">4</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/">服务端渲染</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E6%BA%90%E7%A0%81/">源码</a><span class="categoryBar-list-count">15</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E7%BB%84%E4%BB%B6%E5%B0%81%E8%A3%85/">组件封装</a><span class="categoryBar-list-count">4</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E8%99%9A%E6%8B%9FDom/">虚拟Dom</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">设计模式</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/">项目实战</a><span class="categoryBar-list-count">9</span></li></ul></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2021/01/01/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E5%BC%8F01/" title="Vue源码开发-数据响应式01">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2017-07-20%2F4f06f9aa2ebcea6691a78537052e8e9f%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530599&amp;t=32fb97bad7007bdc6c712ccadacd5721" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-数据响应式01"></a></div><div class="recent-post-info"><a class="article-title" href="/2021/01/01/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E5%BC%8F01/" title="Vue源码开发-数据响应式01">Vue源码开发-数据响应式01</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-12-31T16:00:00.000Z" title="发表于 2021-01-01 00:00:00">2021-01-01</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E6%BA%90%E7%A0%81/">源码</a></span></div><div class="content">Vue源码开发-数据响应式rollup 环境搭建12345671. rollup 是一个单独js打包工具 相比webpack来讲 速度好 编辑好 他更适合开发类库2. 安装rollup  // 打包用的rollup-plugin-babel  // 让我们的rollup 和 我们的 巴babel 做关联@babel/core // 编译ES6用的 @babel/preset-env // 上面会调用这个里面的一些工具 去转换语法rollup-plugin-serve -D // 启动本地服务的
配置12345678910111213141516171819202122232425262728293031import babel from &#x27;rollup-plugin-babel&#x27; //转换语法的插件import serve from &#x27;rollup-plugin-serve&#x27; // 启动服务的插件export default &#123;input:&#x27;./src/index.js&#x27;, // 你要编译的入口文件output:&# ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/04/27/%E5%86%99%E4%B8%80%E4%B8%AA%E7%AE%80%E7%89%88%E7%9A%84Promise/" title="手写一个简版的promise">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2017-07-20%2F4f06f9aa2ebcea6691a78537052e8e9f%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530599&amp;t=32fb97bad7007bdc6c712ccadacd5721" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="手写一个简版的promise"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/27/%E5%86%99%E4%B8%80%E4%B8%AA%E7%AE%80%E7%89%88%E7%9A%84Promise/" title="手写一个简版的promise">手写一个简版的promise</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-26T16:00:00.000Z" title="发表于 2020-04-27 00:00:00">2020-04-27</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E6%BA%90%E7%A0%81/">源码</a></span></div><div class="content">手写一个简单版的PromisePromise都做了哪些事情123451. 首先我们 new 的时候 会穿进去一个立即执行的函数 如果这个函数不传 就会报错2. 在类的实例上 会有两个值 一个是状态 初始值是 pending 一个是值 初始值 为 undefined3. 这个立即执行函数 会接受两个参数 一个参数是 resolve 函数 会把我们类里面的状态变为成功 fulfilled 并且把我的值改变为你穿进来的值 一个是 reject 函数 会把我们类里面的状态变成为失败 rejected 值也会跟着改变4. 做为对象的时候 调用Promise.resovle方法会返回一个状态为成功的promise对象 调用Promise.reject 方法会返回一个状态为失败的promise对象5. 而不论成功或者失败 当你用resolve 或者 reject 的时候 都会通知then方法的里面的成功 或者失败的函数 异步的去获得结果
作为构造函数12341. 首先 在类上 会有 状态 初始是pending 而 默认值 是undefined2. 然后穿进来的立即执行函数 如果不传 就会报错 这个函 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/04/27/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" title="发布订阅">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="发布订阅"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/27/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" title="发布订阅">发布订阅</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-26T16:00:00.000Z" title="发表于 2020-04-27 00:00:00">2020-04-27</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">设计模式</a></span></div><div class="content">设计模式发布订阅设计模式11. 设计模式是一种思想 为的是更好的管理我们的代码
123451. 比如我现在要给一个Dom 元素 绑定多个 事件2. 如果使用 DOM 0 级别绑定 就显得比较不太方便3. 使用 DOM2级 去绑定 就有了事件池的概念4. 但是 以上只支持 我们的浏览器 自己的内置事件 比如 click mouseEnter 之类的 如果我们自己定义的事件就不支持5. 所以我们基于上述的思想 就可以 自己写个事件池 然后支持自己的自定义事件
DOM 0级123456789function fn1() &#123;console.log(1)&#125;function fn2() &#123;console.log(2)&#125;function fn2() &#123;console.log(3)&#125;box.onclick = function () &#123;  fn1()  fn2()  fn3()&#125;//  以上只是一个简单的例子 假如 我们 这三个方法 都不在一个 js文件里 你就需要分别的引入进来 然后在 我们的click函数里去写入 如果 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/04/26/js%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6/" title="JavaScript 事件循环机制">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JavaScript 事件循环机制"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/26/js%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6/" title="JavaScript 事件循环机制">JavaScript 事件循环机制</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-25T16:00:00.000Z" title="发表于 2020-04-26 00:00:00">2020-04-26</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%8E%9F%E7%94%9Fjs/">原生js</a></span></div><div class="content">JavaScript 事件循环机制概念123451.JavaScript 是一门单线程的非阻塞的脚本语言2.单线程意味着 代码在执行的任何时候 都只有一个主线程来处理所有的任务3.那么我们代码在执行一个无法立刻返回结果,而需要花费一定时间才能返回的任务的时候 怎么办4.这个时候就是我们上面说的非阻塞的体现 如I/O事件 如果执行了一个无法立刻返回结果的任务 主线程就会挂起(pending)这个任务 然后在异步任务返回结果的时候在根据一定的规则去执行响应的回调5.HTML5的新特性中web worker 可以让 JavaScript 成为一门多线程的语言 但实际开发中 使用 webWorker 存在很多限制
执行栈与事件队列1231.当JavaScript 代码执行的时候 会将不同的变量存在于内存中不同的位置2.基本类型 undefined null boolean number string 存放在栈内存中(数据大小确定,内存空间可以分配)3.复杂数据类型 对象 数组 函数 存放在 堆内存中 保存的是指针 指向对应的地址
12341.当我们调用一个方法的时候 js会生成一个与这个方法对 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/04/26/vue3.0/" title="Vue 3.0">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue 3.0"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/26/vue3.0/" title="Vue 3.0">Vue 3.0</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-25T16:00:00.000Z" title="发表于 2020-04-26 00:00:00">2020-04-26</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue/">Vue</a></span></div><div class="content">VUE3.0简单描述1231.这里我们的项目 还是用vue-cli去创建 版本在4.xx以上 创建出来的项目可以兼容2.x2.相比vue2.0来说从optionsAPI 配置 变成了 composition-api 3.基本来上说 vue2.0是在配置好的地方写固定的代码比如你的数据要声明在data里 方法写在methods里 而vue3.0 是你要用什么你就引用什么 说白了就是hook钩子 采用这种纯函数的形式 
创建1231.用vue-cli 4.xx版本以上去创建 2.创建的方式和以前一样在选择vue里选择vue3.0 这样创建的项目是可以兼容vue2.0的项目的3.如果需要纯vue3.0的项目 需要使用vue@next
setup函数121.我们所有的逻辑 和函数可能都会在这里执行2.会接收两个默认的参数 一个是props(父组件传过来的值) 一个是 context 执行期上下文 (可以理解为this attr slot emit)  
响应式  reactive121.我们现在所有的 数据和方法 都要定义在setup函数里 然后返回一个对象2.如果要想实现数据响应式 需要我们 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/04/24/vue+ts%E5%AE%9E%E6%88%98/" title="Vue + Ts 实战">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue + Ts 实战"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/24/vue+ts%E5%AE%9E%E6%88%98/" title="Vue + Ts 实战">Vue + Ts 实战</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-23T16:00:00.000Z" title="发表于 2020-04-24 00:00:00">2020-04-24</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/">项目实战</a></span></div><div class="content">Vue + TypeScript实战基础121.初始化命令 还是使用vue-cli脚手架去搭建 vue create vue-typescript-demo2.选择的话我们这里就选择了 typescript
1231.创建出来的项目 现在都是.ts后缀解为的文件了2. 多了 shims-tsx.d.ts文件  这里主要用于我们可以些tsx结尾的文件 里面可以写jsx的代码3. 多了 shims-vue.d.ts文件 用ts可以.vue的文件 
组文件文件里的写法12345678910111213141516171819&lt;template&gt;  &lt;div class=&quot;home&quot;&gt;    &lt;img alt=&quot;Vue logo&quot; src=&quot;../assets/logo.png&quot;&gt;    &lt;HelloWorld msg=&quot;Welcome to Your Vue.js + TypeScript App&quot;/&gt;  &lt;/div&gt;&lt;/template&gt;这 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/04/23/TypeScript/" title="TypeScript">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="TypeScript"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/23/TypeScript/" title="TypeScript">TypeScript</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-22T16:00:00.000Z" title="发表于 2020-04-23 00:00:00">2020-04-23</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/TS/">TS</a></span></div><div class="content">TypeScript安装121. 这里采用的全局安装 yarn global add typescript 2. 查看安装是否成功 tsc -v
编译1231.typescript的创建的文件是.ts后缀的文件2.手动编译3.配置文件编译
12//手动编译index.ts文件  使用 tsc + 文件名称 进行编译 编译之后就会自动生成 index.js文件
12345//自动编译1.在项目目录里 用tsc --init生成 tsconfig.json的文件2.更改生成的tsconfig.json 配置文件里的  &quot;outDir&quot;: &quot;./&quot; 修改为  &quot;outDir&quot;: &quot;./js&quot; 就是把编译好的文件生成当前目录下的js文件夹里3.在vscode编译器 打开终端 选择 运行任务 选择typescript 监视文件 即可4.也可以执行命令 tsc --watch index.ts
ts中的数据类型1234567891011121.TS中提供类型校验2.其中提供了以下一些数据类型布尔类型(boolean)数 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/04/22/ES6/" title="ES6/ES7/ES8/ES9/ES10/ES11">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530659&amp;t=bbcfe1e86f393eecbb0722db1b92e475" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="ES6/ES7/ES8/ES9/ES10/ES11"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/22/ES6/" title="ES6/ES7/ES8/ES9/ES10/ES11">ES6/ES7/ES8/ES9/ES10/ES11</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-21T16:00:00.000Z" title="发表于 2020-04-22 00:00:00">2020-04-22</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%8E%9F%E7%94%9FJs/">原生Js</a></span></div><div class="content">环境的搭建12341.首先我们写的是ES6的语法2.在html里引入的js文件 是转换之后的 所以我们要用babel转换3.需要安装的包 npm install -g babel-cli  npm install --save-dev babel-preset-es2015 babel-cli4.然后在我们的根目录下输入文件夹 .babelrc文件
1234567.babelrc文件 写的是json格式 主要就是告诉babel 我们用哪些插件  去转换&#123;    &quot;presets&quot;:[        &quot;es2015&quot;    ],    &quot;plugins&quot;: []&#125;
1234567891011121314151617181920212223然后输入命令babel .\src\index.js -o .\dist\index.jssrc下的index.js 是你要转换的文件dist文件夹下是你 转换完成的文件// 我们本次转换 都需要这么输入文件  所以 我们用package.json 去设置脚本&#123;   ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/04/21/uni-app/" title="Uni-app">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2017-07-20%2F4f06f9aa2ebcea6691a78537052e8e9f%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530599&amp;t=32fb97bad7007bdc6c712ccadacd5721" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Uni-app"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/21/uni-app/" title="Uni-app">Uni-app</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-20T16:00:00.000Z" title="发表于 2020-04-21 00:00:00">2020-04-21</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%BE%AE%E4%BF%A1/">微信</a></span></div><div class="content">uni-app介绍12uni-app是一个使用vue.js开发所有前端的应用的框架，开发者编写一套代码 可发布到IOS Android H5 以及各种小程序即使不跨段 uni-app同时也是更好的小程序开发框架
环境搭建123451.需要安装HbuilderX  APP开发板2.安装微信开发者工具3.创建项目 新建 - uni-app项目4.运行 直接点运行 就可以看到运行到浏览器 模拟器之类的5.运行 到微信开发者工具 首先第一次运行需要在Hbuilder配置微信开发者工具所在的位置 第二 需要在微信开发者工具里的安全设置端口
文件目录详解1234567891.pages.json  主要用来对uni-app进行全局设置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等2.manifest.json 主要是应用的配置文件、用于指定应用的名称、图标、权限等3.app.vue 是我们的根组件，所有页面都是在app.vue下进行切换的，是页面的入口文件，可调用应用的生命周期函数4.main.js 是我们项目文件的入口文件 主要作用是初始化vue实例并使用需要的插件uni ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/04/20/%E5%85%AC%E4%BC%97%E5%8F%B7%E9%85%8D%E7%BD%AE/" title="微信公众号配置">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530659&amp;t=bbcfe1e86f393eecbb0722db1b92e475" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="微信公众号配置"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/20/%E5%85%AC%E4%BC%97%E5%8F%B7%E9%85%8D%E7%BD%AE/" title="微信公众号配置">微信公众号配置</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-19T16:00:00.000Z" title="发表于 2020-04-20 00:00:00">2020-04-20</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E5%BE%AE%E4%BF%A1/">微信</a></span></div><div class="content">公众号服务端1.本地端口映射公网IP1231.使用工具 https://www.ngrok.cc/  ngrok2.首先登录 然后开通隧道 把你本机的服务器地址填写进去 找到隧道管理 获取ID3.启动下载好的客户端 把ID粘贴进去即可
2.公众号测试配置1231.登录以后 点击开发者工具 -&gt; 公众平台测试账号2.这里会受到你的appid 和 appsecret 用于配置3.还有接口配置和token 这里也是用于配置
3.服务器之间交互12341.这里我们用关键词回复举例 首先当有人给我们的公众号发消息的时候我们在微信平台的后台 可以设置自动的关键词回复2.当有人给我们的公众号发送消息的时候 是发送到微信的服务器上 我们可以通过配置 把他发到我们自己的服务器上 然后服务器的代码会根据判断 在去回复关键词 在发送给微信服务器 微信服务器在发给客户 这是一个基本陵城3.以上操作需要配置 这里我们使用co-wachat的包去完成4.这一步的流程(配ID 配token)都是我们要验证微信 因为网络上那么多请求 我怎么知道 你是不是微信 
12345678910//配置 首先在我我们的代码 ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/#content-inner">3</a><span class="space">&hellip;</span><a class="page-number" href="/page/7/#content-inner">7</a><a class="extend next" rel="next" href="/page/3/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/my.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">北城韩雨</div><div class="author-info__description">一个前端界的小学生</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/wazer1987"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="/wangzhengvslike@163.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content"><p>感谢访问本站，如喜欢请收藏。本站主要分享前端知识，立志成为资深前端工程师，但目前是一个前端界的小学生 若喜欢可以打赏请博主喝一杯冰阔落</p> <p>另外请大家多多支持淼哥的开源项目</p> <p>https://github.com/flipped-aurora/gin-vue-admin</p> <p>🌟🌟欢迎大家start 🌟🌟</p> <p>欢迎加入博主的前端技术交流群</p> <p style="background:rgba(255,255,255,1);margin:0"> <img src="/img/code.png"></img> </p></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin"><img src="/img/gin-vue-admin.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Gin-Vue-Admin"/></a><div class="content"><a class="title" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin">Gin-Vue-Admin</a><time datetime="2021-04-15T16:00:00.000Z" title="发表于 2021-04-16 00:00:00">2021-04-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件的渲染10"/></a><div class="content"><a class="title" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10">Vue源码开发-组件的渲染10</a><time datetime="2021-01-07T16:00:00.000Z" title="发表于 2021-01-08 00:00:00">2021-01-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件合并策略09"/></a><div class="content"><a class="title" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09">Vue源码开发-组件合并策略09</a><time datetime="2021-01-06T16:00:00.000Z" title="发表于 2021-01-07 00:00:00">2021-01-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-数组的依赖收集08"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08">Vue源码开发-数组的依赖收集08</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530659&amp;t=bbcfe1e86f393eecbb0722db1b92e475" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-生命周期合并07"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07">Vue源码开发-生命周期合并07</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
            <i class="fas fa-folder-open"></i>
            <span>分类</span>
            <a class="card-more-btn" href="/categories/" title="查看更多">
    <i class="fas fa-angle-right"></i></a>
            </div>
            <ul class="card-category-list" id="aside-cat-list">
            <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Gin-Vue-Admin/"><span class="card-category-list-name">Gin-Vue-Admin</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS%E9%AB%98%E7%BA%A7/"><span class="card-category-list-name">JS高级</span><span class="card-category-list-count">4</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JavaScript/"><span class="card-category-list-name">JavaScript</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Node/"><span class="card-category-list-name">Node</span><span class="card-category-list-count">4</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/React/"><span class="card-category-list-name">React</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/TS/"><span class="card-category-list-name">TS</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Vue/"><span class="card-category-list-name">Vue</span><span class="card-category-list-count">4</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/webpack/"><span class="card-category-list-name">webpack</span><span class="card-category-list-count">3</span></a></li>
            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Ant-Design/" style="font-size: 1.1em; color: #999">Ant Design</a> <a href="/tags/Egg/" style="font-size: 1.1em; color: #999">Egg</a> <a href="/tags/JavaScript/" style="font-size: 1.4em; color: #99a5b6">JavaScript</a> <a href="/tags/Json-server/" style="font-size: 1.1em; color: #999">Json-server</a> <a href="/tags/Koa2/" style="font-size: 1.2em; color: #999da3">Koa2</a> <a href="/tags/Mock/" style="font-size: 1.1em; color: #999">Mock</a> <a href="/tags/MongoDB/" style="font-size: 1.2em; color: #999da3">MongoDB</a> <a href="/tags/Node/" style="font-size: 1.1em; color: #999">Node</a> <a href="/tags/Nuxt/" style="font-size: 1.1em; color: #999">Nuxt</a> <a href="/tags/React/" style="font-size: 1.3em; color: #99a1ac">React</a> <a href="/tags/React-%E5%AE%9E%E6%88%98/" style="font-size: 1.1em; color: #999">React 实战</a> <a href="/tags/TypeScript/" style="font-size: 1.2em; color: #999da3">TypeScript</a> <a href="/tags/Vue/" style="font-size: 1.5em; color: #99a9bf">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 1.1em; color: #999">Vue-Router</a> <a href="/tags/Vuex/" style="font-size: 1.1em; color: #999">Vuex</a> <a href="/tags/Webpack/" style="font-size: 1.3em; color: #99a1ac">Webpack</a> <a href="/tags/jQuery/" style="font-size: 1.2em; color: #999da3">jQuery</a> <a href="/tags/web/" style="font-size: 1.2em; color: #999da3">web</a> <a href="/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/" style="font-size: 1.1em; color: #999">小程序</a> <a href="/tags/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E9%85%8D%E7%BD%AE/" style="font-size: 1.1em; color: #999">微信公众号配置</a> <a href="/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/" style="font-size: 1.2em; color: #999da3">服务端渲染</a> <a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size: 1.1em; color: #999">算法</a> <a href="/tags/%E8%99%9A%E6%8B%9FDom/" style="font-size: 1.1em; color: #999">虚拟Dom</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/04/"><span class="card-archive-list-date">四月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/01/"><span class="card-archive-list-date">一月 2021</span><span class="card-archive-list-count">10</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/04/"><span class="card-archive-list-date">四月 2020</span><span class="card-archive-list-count">17</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/03/"><span class="card-archive-list-date">三月 2020</span><span class="card-archive-list-count">6</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2019/03/"><span class="card-archive-list-date">三月 2019</span><span class="card-archive-list-count">31</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">65</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">274.7k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2021-08-02T09:15:23.879Z"></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright"><span>&copy;2017 - 2021</span><svg style="width:2em; height:2em;position: relative;top: 10px;" aria-hidden="true"><use xlink:href="#icon-Butterfly"></use></svg><span>北城韩雨</span></div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><p><a style="margin-inline:5px" target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a><a style="margin-inline:5px" target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a><a style="margin-inline:5px" target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js"></script><div class="js-pjax"><script>function subtitleType () {
  if (true) { 
    var typed = new Typed("#subtitle", {
      strings: "请大家多多支持淼哥的开源项目 地址在公告中,如果我一拳把自己打死了 那我算强壮还是虚弱,从来没有真正的绝境 只有心灵的迷途,Never put off till tomorrow what you can do today".split(","),
      startDelay: 300,
      typeSpeed: 150,
      loop: true,
      backSpeed: 50
    })
  } else {
    document.getElementById("subtitle").innerHTML = '请大家多多支持淼哥的开源项目 地址在公告中'
  }
}

if (true) {
  if (typeof Typed === 'function') {
    subtitleType()
  } else {
    getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
  }
} else {
  subtitleType()
}</script></div><script defer src="/live2d-widget/autoload.js"></script><script src="/js/coin.js"></script><script async src="//at.alicdn.com/t/font_2700632_3rtvhzzpl3h.js"></script><script src="/js/liuxing.js" data-pjax></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1s');
    arr[i].setAttribute('data-wow-delay', '0ms');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/wow_init.min.js"></script><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>